<template>
  <div class="page-container">
    <a-card :bodyStyle="{ padding: '0' }" :bordered="false">
      <a-tabs v-model:active-key="activeTabkey">
        <a-tab-pane v-for="item in tabList" :key="item.key" :title="item.title">
          <template v-if="item.key == 1">
            <car-info-block :carInfo="carInfo" :fieldList="fieldList" />
            <insure-info :carLicenseNo="carInfo.licenseNo" :carId="carInfo.carId" :insureId="routePrams.id" />
          </template>
          <template v-if="item.key == 2"> 账单信息 </template>
          <!-- <template v-if="item.key == 3">
            <OperateLog :id="routePrams.id" type="6" />
          </template> -->
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup name="CarInsureDetail">
  import { ref, watch, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import insureInfo from './components/insure-info.vue'
  import { carInsuranceDetail } from '@/api/asset/carInsure.js'
  import usePermissionStore from '@/store/modules/permission'
  const { resourcePermission } = usePermissionStore()
  import { doAsyncRoutes } from '@/setting'

  const route = useRoute()
  const routePrams = route.params
  const routeQuery = route.query
  const activeTabkey = ref('1')

  const tabList = computed(() => {
    let list = [{ title: '保险信息', key: '1' }]
    if (resourcePermission.includes('vms:asstes:operation:car-insure.bill') || !doAsyncRoutes) {
      list.push({ title: '账单信息', key: '2' })
    }
    return list
  })

  const fieldList = ref([
    { label: '车架号', prop: 'vin' },
    { label: '车辆当前归属门店', prop: 'carSiteName' },
    { label: '归属车场', prop: 'libraryName' },
  ])

  watch(
    () => routeQuery.tab,
    (newVal) => {
      if (newVal) activeTabkey.value = routeQuery.tab
    },
    { immediate: true }
  )

  // 获取车辆详情
  const carInfo = ref({})
  if (routePrams.id) {
    carInsuranceDetail({ id: routePrams.id }).then((res) => {
      const result = res.result
      carInfo.value = result
    })
  }
</script>

<style lang="less" scoped>
  .basic-info-wrapper {
    .section-item {
      .section-item-header {
        color: #1d2129ff;
        font-weight: 500;
      }
      .section-item-content {
        padding: 20px 20px 0 20px;
        .basic-info {
          .car-info {
            margin-top: 14px;
            &.car-main-info {
              height: 28px;
              margin-top: 0;
              line-height: 28px;
            }
            .license-number {
              font-size: 20px;
              font-weight: 600;
              color: #1d2129;
              vertical-align: bottom;
            }
          }
        }
      }
      &.gray {
        background-color: rgba(var(--gray-1), 0.5) !important;
        border-radius: 0px 0px 0px 0px;
        .section-item-content {
          padding: 20px 20px 12px 20px;
        }
      }
    }
    .section-item + .section-item {
      margin-top: 16px;
    }
  }
</style>
